<!-- 设置手势密码 -->
<template>
    <div class="box">
        <div class="top">
            <div class="back" @click="$router.back()">
                <svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path d="M25 5L10 20L25 35" stroke="white" stroke-width="4" stroke-linecap="round" stroke-linejoin="round"/>
                </svg>
            </div>
            <div class="font_title">设置手势密码</div>
            <div class="del" @click="handleClearPassword">清除密码</div>
        </div>
        <div class="title" :class="{ 'error-text': titleMessage === '最少连接四个点，请重新输入！' }">{{ titleMessage }}</div>
        <GestureLock 
            mode="set"
            @set="handleSet"
            @error="handleError"
        />
        <MessageBox ref="messageBox" />
    </div>
  </template>
  
  <script setup>
import { ref } from 'vue';
import { useRouter } from 'vue-router';
import GestureLock from '../components/GestureLock.vue';
import MessageBox from '../components/MessageBox.vue';

const router = useRouter();
const messageBox = ref(null);
const titleMessage = ref('请设置手势密码');

// 处理设置密码
function handleSet({ status, password }) {
    if (status === 'confirm') {
        titleMessage.value = '请再次绘制手势';
    } else if (status === 'success') {
        // 存储手势密码
        localStorage.setItem('gesturePassword', JSON.stringify(password));
        // 设置验证状态为已验证
        sessionStorage.setItem('gestureVerified', 'true');
        titleMessage.value = '手势密码设置成功！';
        
        // 设置完成后直接跳转到首页
        setTimeout(() => {
            router.replace('/my');
        }, 1000);
    }
}

// 处理错误
function handleError(message) {
    titleMessage.value = message;
    setTimeout(() => {
        titleMessage.value = '请设置手势密码';
    }, 1000);
  }
  
// 清除密码
function handleClearPassword() {
    messageBox.value.show('确定要清除手势密码吗？');
    localStorage.removeItem('gesturePassword');
  }
  </script>
  
<style lang='less' scoped>
.box {
    width: 100%;
    .top {
        width: 100%;
        height: 100px;
        background-color: #fb8fae;
        display: flex;
        align-items: center;
        justify-content: space-around;
        color: #fff;
        .back {
            width: 120px;
            height: 100%;
            margin-left: 20px;
            line-height: 50px;
            text-align: center;
            display: flex;
            align-items: center;
            svg {
                width: 40px;
                height: 40px;
            }
        }
        .font_title {
            font-size: 32px;
            margin: 0 auto;
        }
        .del {
            margin-right: 20px;
            width: 120px;
            font-size: 28px;
            text-align: center;
    height: 100%;
            line-height: 100px;
            cursor: pointer;
        }
    }
}

.title {
    margin-top: 100px;
    text-align: center;
    font-size: 34px;
    margin-bottom: 100px;
    color: #333;
    
    &.error-text {
        color: #ff0000;
    }
  }
  </style>